<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			.imga{
				animation: dfc .8s linear infinite;
			}
			@keyframes dfc{
				0%{
				    transform: rotate(180deg);
					}
				30%{
					transform: rotate(360deg);
					}
				100%{
					transform: rotate(720deg);
                    }
			}
			.imgb{
					animation: dfc1 .8s linear infinite;
			}
			@keyframes dfc1{
				0%{
				    transform: scale(1) rotateY(180deg);
					}
				30%{
					transform: scale(.8) rotateY(360deg);
					}
				100%{
					transform: scale(1) rotateY(720deg);
			        }
			}
		</style>
	</head>
	<body>
		<img src="./img/1.gif" alt="" />
		<audio src="./img/dafengche.mp3" autoplay></audio>
		<button id="btn1">转动</button>
		<button id="btn2">停止</button>
		<button id="btn3">反转</button>
		<script>
			$("#btn1").click(function(){
				//元素  属性  |元素可以加类名
				$("img").attr("src","./img/大风车.jpeg").addClass("imga");
			});
			$("#btn2").click(function(){
				$("img").removeClass("imga")
				$("audio").removeAttr("src")
			});
			$("#btn3").click(function(){
				$("img").addClass("imgb")
				$("audio").attr("src","./img/dafengche.mp3")
			});
		</script>
	</body>
</html>